<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>满意网-综合网购首选-正品低价、品质保证、配送即使、轻松购物、包您满意！</title>
    <!--icon字体图标-->
    <!--<link rel="shortcut icon" href="image/H6@QR(8]_TR5Z~FGIR$_WI8.png" type="image/x-icon"/>-->
    <!--初始化css-->
    <link rel="stylesheet" href="css/normalize.css" type="text/css">
    <!--公共的css:头部和底部-->
    <link rel="stylesheet" href="css/base.css" type="text/css">
    <!--商品列表页的css-->
    <link rel="stylesheet" href="css/shoppingList.css" type="text/css">
    <!--字体图标css-->
    <link rel="stylesheet" type="text/css" href="font/download/font_942gj5vp4fp/iconfont.css">
    <link rel="stylesheet" href="font/download/font_90ljwep9b4l/iconfont.css">
    <link rel="stylesheet" href="font/download (2)/font_pzp01tyw83/iconfont.css">
</head>
<body>
<!--快捷导航模块开始-->
<div class="shortcut">
    <div class="w w1" style="display: block;">
        <ul class="fl">
            <li><a href="http://localhost:8080/login">请登录</a></li>
            <li class="spacer">|</li>
            <li><a href="http://localhost:8080/register">注册</a></li>
            <li class="spacer">|</li>
            <li>
                <a href="#" id="wechartLogion">
                    <span></span>
                    微信登录
                </a>
            </li>
        </ul>
        <ul class="fr">
            <li id="phoneApp">
                <a href="#">
                    <span></span>
                    手机版
                </a>
                <div class="phoneApp">
                    <img src="image/shoujierweima.png" alt="">
                    <h4>查看手机网站</h4>
                </div>
                <div class="trangle1"></div>
            </li>
            <li class="spacer">|</li>
            <li>
                <a href="">
                    <span></span>
                    收藏本站
                </a>
            </li>
            <li class="spacer">|</li>
            <li><a href="#">我的资料</a></li>
            <li class="spacer">|</li>
            <li><a href="">我的订单</a></li>
            <li class="spacer">|</li>
            <li>
                <a href="">
                    <span></span>
                    购物车
                </a>
            </li>
        </ul>
    </div>
    <div class="w" style="display: none;">
        <ul class="fl">
            <li class="userAccount"></li>
            <li class="spacer">|</li>
            <li><a href="#" class="loginOut">退出</a></li>
        </ul>
        <ul class="fr">
            <li id="phoneAppAfter">
                <a href="#">
                    <span></span>
                    手机版
                </a>
                <div class="phoneApp">
                    <img src="image/shoujierweima.png" alt="">
                    <h4>查看手机网站</h4>
                </div>
                <div class="trangle1"></div>
            </li>
            <li class="spacer">|</li>
            <li>
                <a href="">
                    <span></span>
                    收藏本站
                </a>
            </li>
            <li class="spacer">|</li>
            <li><a href="http://localhost:8080/userinfo">我的资料</a></li>
            <li class="spacer">|</li>
            <li><a href="http://localhost:8080/userinfo">我的订单</a></li>
            <li class="spacer">|</li>
            <li>
                <a href="http://localhost:8080/shoppingcart">
                    <span></span>
                    购物车
                </a>
            </li>
        </ul>
    </div>
</div>
<!--快捷导航模块结束-->
<!--顶部模块开始-->
<div class="header">
    <div class="w">
        <div class="text">
            E-commerce Platform
            <span>Design</span>
        </div>
        <div class="hotwords">
            <div class="itemCenter"><a href="http://localhost:8080">首页</a></div>
            <div class="itemCenter"><a href="http://localhost:8080/discount">优惠抢购</a></div>
            <div class="itemCenter"><a href="http://localhost:8080/secondhand">新品二手</a></div>
            <div class="itemCenter"><a href="http://localhost:8080/appliance">二手电器城</a></div>
            <div class="itemCenter"><a href="http://localhost:8080/member">会员购</a></div>
        </div>
    </div>
</div>
<!--顶部模块结束-->
<!--右侧工具栏开始-->
<div class="rightBar" style="display: none;">
    <i class="message iconfont icon-zhanghao">
        <div class="slogans">我的资料
            <span class="trangle"></span>
        </div>
        <div class="landingBoox">
            <span class="trangle"></span>
            <div class="logintitle">用户登录</div>
            <input type="text" name="userName" placeholder="用户名">
            <input type="text" name="password" placeholder="密码">
            <div class="loginBtn">登录</div>
            <div class="registerQuick"><a href="http://localhost:8080/register">免费注册></a></div>
        </div>
    </i>
    <i class="collection iconfont icon-shoucang-copy">
        <div class="slogans">我的收藏
            <span class="trangle"></span>
        </div>
        <div class="landingBoox">
            <span class="trangle"></span>
            <div class="logintitle">用户登录</div>
            <input type="text" name="userName" placeholder="用户名">
            <input type="text" name="password" placeholder="密码">
            <div class="loginBtn">登录</div>
            <div class="registerQuick"><a href="register.html">免费注册></a></div>
        </div>
    </i>
    <i class="shoppingCar iconfont icon-icon1">
        <div></div>
        <h1>购物车</h1>
        <span>0</span>
        <div class="landingBoox">
            <span class="trangle"></span>
            <div class="logintitle">用户登录</div>
            <input type="text" name="userName" placeholder="用户名">
            <input type="text" name="password" placeholder="密码">
            <div class="loginBtn">登录</div>
            <div class="registerQuick"><a href="register.html">免费注册></a></div>
        </div>
    </i>
    <i class="leaveMessage iconfont icon-liuyan">
        <div class="slogans">留言
            <span class="trangle"></span>
        </div>
    </i>
    <i class="erweima iconfont icon-erweima"></i>
    <i class="toTop iconfont icon-fanhuidingbu" id="toTop">
        <div class="slogans">回到顶部
            <span class="trangle"></span>
        </div>
    </i>
</div>
<div class="afterLogin" style="display: block;">
    <div class="fk-rbar-tabs">
        <i class="message iconfont icon-zhanghao">
            <div class="slogans">我的资料
                <span class="trangle"></span>
            </div>
        </i>
        <i class="collection iconfont icon-shoucang-copy">
            <div class="slogans">我的收藏
                <span class="trangle"></span>
            </div>
        </i>
        <i class="shoppingCar iconfont icon-icon1">
            <div></div>
            <h1>购物车</h1>
            <span>0</span>
        </i>
        <i class="leaveMessage iconfont icon-liuyan">
            <div class="slogans">留言
                <span class="trangle"></span>
            </div>
        </i>
        <i class="erweima iconfont icon-erweima"></i>
        <i class="toTop iconfont icon-fanhuidingbu">
            <div class="slogans">回到顶部
                <span class="trangle"></span>
            </div>
        </i>
    </div>
    <div class="fk-rbar-plugins">
        <div class="myStuffTab">
            <div class="myStuffTab_top">
                <div class="myStuffTab_top_l"><img src="image/secondbrand1.jpg" alt=""></div>
                <div class="myStuffTab_top_r">
                    <div>821998295</div>
                    <div>普通会员</div>
                </div>
            </div>
            <div class="myStuffTab_middle">
                <div>
                    <div>姓名</div>
                    <div>孙力1111</div>
                </div>
            </div>
            <div class="myStuffTab_middle">
                <div>
                    <div>邮箱</div>
                    <div>821992311@qq.com</div>
                </div>
            </div>
            <div class="myStuffTab_middle">
                <div>
                    <div>手机</div>
                    <div>13598745125</div>
                </div>
            </div>
            <div class="myStuffTab_bottom">退出登录</div>
        </div>
        <div class="myCollectionTab">
            <div></div>
            <div>亲，还没有入您法眼的商品哟~</div>
        </div>
        <div class="myCartTab">
            <div class="hasNoCartThings" style="display: none;">
                <div></div>
                <div>亲，您的购物车空空的哟~</div>
            </div>
            <div class="hasCartThings" style="display: block">
                <div class="hasCartThings_top">
                    <div class="cartThing">
                        <img src="image/111.jpg" class="cartThingImg">
                        <div class="cartThingTitle">8成新 新概念摄像机 高清专业数码摄像机</div>
                        <div class="cartThingPrice">￥11099</div>
                        <div class="cartThingNumber">x1</div>
                        <div class="cartThingDelete">删除</div>
                    </div>
                </div>
                <div class="hasCartThings_bottom">去购物车结算</div>
            </div>
        </div>
    </div>
</div>
<!--右侧导航栏结束-->
<!--main模块开始-->
<div class="main"></div>
<!--main模块结束-->
<!--body模块开始-->
<div class="body">
    <div class="w">
        <div class="searchItem">
            <input type="text" id="searchText" name="searchText" placeholder="当前条件下搜索" maxlength="30">
            <span class="searchBtn" id="searchBtn"><i class="iconfont icon-sousuo"></i></span>
        </div>
        <div class="chooseItem">
            <div class="haveChosen">
                <div class="haveChosen_head">已选择：</div>
            </div>
            <div class="chooseList">
                <div class="chooseOption">
                    <div class="chooseTitle">价格：</div>
                    <a href="">0-199</a>
                    <a href="">200-399</a>
                    <a href="">400-799</a>
                    <a href="">1000-1599</a>
                    <a href="">1800以上</a>
                </div>
                <div class="chooseOption">
                    <div class="chooseTitle">成色：</div>
                    <a href="">8成新</a>
                    <a href="">全新</a>
                    <a href="">9成新</a>
                </div>
            </div>
            <div class="filter">
                <div id="sortByName">名称
                    <i class="iconfont icon-shangsheng"></i>
                </div>
                <div id="sortByPrice">价格
                    <i class="iconfont icon-shangsheng"></i>
                </div>
                <div>
                    <input type="text" class="inputPrice" name="inputPrice" placeholder="￥" id="priceFirst">
                    -
                    <input type="text" class="inputPrice" name="inputPrice" placeholder="￥" id="priceLast">
                    <div class="filterBtn" id="filterBtn">确定</div>
                </div>
            </div>
        </div>
        <div class="listItem"></div>
        <div class="page">
            <div>
                <div class="prePage prevent" id="prePage">上一页</div>
                <div class="pageNumber" id="pageNumber">
                    <ul>
                    </ul>
                </div>
                <div class="nextPage" id="nextPage">下一页</div>
            </div>
        </div>
    </div>
</div>
<!--body模块结束-->
<!--foot模块开始-->
<div class="foot">
    <div class="foot_top"><img src="image/5XGBR@Z$QVQ4$%5D1K%60HRJ958.png" alt=""></div>
    <div class="foot_bottom"><img src="image/OP4FMG5S9X_6TVX%6034(PZC2.png" alt=""></div>
</div>
<!--foot模块结束-->
<script src="js/jquery-1.12.4.js"></script>
<script src="js/jquery.lazyload.js"></script>
<script src="js/template-web.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/base.js"></script>
<script src="js/shoppingList.js"></script>
<script>
    $(function () {
        var arr = '{{each commodities as value}}' +
            '<div>' +
            '<s>' +
            '<div>满100减9</div>' +
            '<span class="imgItem" commodityId = "{{value.commodityId}}"><img src="{{value.commodityPicture}}" alt=""/></span>' +
            '</s>' +
            '<s>' +
            '<span class="couponDes" title="{{value.commodityTitle}}">{{value.commodityTitle}}</span>' +
            '</s>' +
            '<div class="price">' +
            '<span>￥</span>' +
            '<span>{{value.commodityPrice}}</span>' +
            '<span>.00</span>' +
            '<div class="buyOnce" commodityId = "{{value.commodityId}}">立即购买</div>' +
            '</div>' +
            '</div>' +
            '{{/each}}';
        var ONE = 1;
        sessionStorage.setItem("currentPage", ONE);
        if (window.sessionStorage.getItem("url") != null) {
            URL = window.sessionStorage.getItem("url");
        } else {
            URL = "http://localhost:8080/search/all?currentPage=1&maxSize=12&type=titleasc";
        }
        aGet(URL, null, arr);
        if (sessionStorage.getItem("text") != null) {
            $("#searchText").val(sessionStorage.getItem("text"));
        }
        if (sessionStorage.getItem("rotateName") == 1) {
            $("#sortByName").children("i").css("transform", "rotate(0deg)");
        }
        else if (sessionStorage.getItem("rotateName") == -1) {
            $("#sortByName").children("i").css("transform", "rotate(180deg)");
        }
        if (sessionStorage.getItem("rotatePrice") == 1) {
            $("#sortByPrice").children("i").css("transform", "rotate(0deg)");
        }
        else if (sessionStorage.getItem("rotatePrice") == -1) {
            $("#sortByPrice").children("i").css("transform", "rotate(180deg)");
        }
        if (sessionStorage.getItem("backgroundColorName") != null) {
            $("#sortByName").css("backgroundColor", sessionStorage.getItem("backgroundColorName"));
        }
        if (sessionStorage.getItem("backgroundColorPrice") != null) {
            $("#sortByPrice").css("backgroundColor", sessionStorage.getItem("backgroundColorPrice"));
        }
        $("#sortByName").on("click", function () {
            var textValue = $("#searchText").val();
            if ($(this).children("i").css("transform").replace(/[^0-9\-,]/g, '').split(',')[3] == 1 && $("#searchText").val() == "") {
                var urlheadRequest = getHead();
                ajaxGet(urlheadRequest, {
                    "currentPage": 1, "maxSize": 12, "type": "titleasc"
                }, arr);
                sessionStorage.setItem("currentPage", ONE);
            }
            if ($(this).children("i").css("transform").replace(/[^0-9\-,]/g, '').split(',')[3] == -1 && $("#searchText").val() == "") {
                var urlheadRequest = getHead();
                ajaxGet(urlheadRequest, {
                    "currentPage": 1,
                    "maxSize": 12,
                    "type": "titledesc"
                }, arr);
                sessionStorage.setItem("currentPage", ONE);
            }
            if ($(this).children("i").css("transform").replace(/[^0-9\-,]/g, '').split(',')[3] == -1 && $("#searchText").val() != "") {
                if (typeof switchKeywords($("#searchText").val()) != "number") {
                    var urlheadRequest = getHead();
                    ajaxGet(urlheadRequest, {
                        "currentPage": 1,
                        "maxSize": 12,
                        "keywords": textValue,
                        "type": "titledesc"
                    }, arr);
                } else {
                    var urlheadRequest = getHead();
                    ajaxGet(urlheadRequest, {
                        "currentPage": 1,
                        "maxSize": 12,
                        "sortId": switchKeywords($("#searchText").val()),
                        "type": "titledesc"
                    }, arr);
                }
                sessionStorage.setItem("currentPage", ONE);
            }
            if ($(this).children("i").css("transform").replace(/[^0-9\-,]/g, '').split(',')[3] == 1 && $("#searchText").val() != "") {
                if (typeof switchKeywords($("#searchText").val()) != "number") {
                    var urlheadRequest = getHead();
                    ajaxGet(urlheadRequest, {
                        "currentPage": 1,
                        "maxSize": 12,
                        "keywords": textValue,
                        "type": "titleasc"
                    }, arr);
                } else {
                    var urlheadRequest = getHead();
                    ajaxGet(urlheadRequest, {
                        "currentPage": 1,
                        "maxSize": 12,
                        "sortId": switchKeywords($("#searchText").val()),
                        "type": "titleasc"
                    }, arr);
                }
                sessionStorage.setItem("currentPage", ONE);
            }
        });
        $("#sortByPrice").on("click", function () {
            var textValue = $("#searchText").val();
            if ($(this).children("i").css("transform").replace(/[^0-9\-,]/g, '').split(',')[3] == 1 && $("#searchText").val() == "") {
                var urlheadRequest = getHead();
                ajaxGet(urlheadRequest, {
                    "currentPage": 1, "maxSize": 12, "type": "priceasc"
                }, arr);
                sessionStorage.setItem("currentPage", ONE);
            }
            if ($(this).children("i").css("transform").replace(/[^0-9\-,]/g, '').split(',')[3] == -1 && $("#searchText").val() == "") {
                var urlheadRequest = getHead();
                ajaxGet(urlheadRequest, {
                    "currentPage": 1,
                    "maxSize": 12,
                    "type": "pricedesc"
                }, arr);
                sessionStorage.setItem("currentPage", ONE);
            }
            if ($(this).children("i").css("transform").replace(/[^0-9\-,]/g, '').split(',')[3] == -1 && $("#searchText").val() != "") {
                if (typeof switchKeywords($("#searchText").val()) != "number") {
                    var urlheadRequest = getHead();
                    ajaxGet(urlheadRequest, {
                        "currentPage": 1,
                        "maxSize": 12,
                        "keywords": textValue,
                        "type": "pricedesc"
                    }, arr);
                } else {
                    var urlheadRequest = getHead();
                    ajaxGet(urlheadRequest, {
                        "currentPage": 1,
                        "maxSize": 12,
                        "sortId": switchKeywords($("#searchText").val()),
                        "type": "pricedesc"
                    }, arr);
                }
                sessionStorage.setItem("currentPage", ONE);
            }
            if ($(this).children("i").css("transform").replace(/[^0-9\-,]/g, '').split(',')[3] == 1 && $("#searchText").val() != "") {
                if (typeof switchKeywords($("#searchText").val()) != "number") {
                    var urlheadRequest = getHead();
                    ajaxGet(urlheadRequest, {
                        "currentPage": 1,
                        "maxSize": 12,
                        "keywords": textValue,
                        "type": "priceasc"
                    }, arr);
                } else {
                    var urlheadRequest = getHead();
                    ajaxGet(urlheadRequest, {
                        "currentPage": 1,
                        "maxSize": 12,
                        "sortId": switchKeywords($("#searchText").val()),
                        "type": "priceasc"
                    }, arr);
                }
                sessionStorage.setItem("currentPage", ONE);
            }
        });
        $("#searchBtn").on("click", function () {
            var textValue = $("#searchText").val();
            if (typeof switchKeywords(textValue) != "number") {
                ajaxGet("http://localhost:8080/search/commodity", {
                    "currentPage": 1,
                    "maxSize": 12,
                    "keywords": textValue,
                    "type": "titleasc"
                }, arr);
            } else {
                ajaxGet("http://localhost:8080/search/sort", {
                    "currentPage": 1,
                    "maxSize": 12,
                    "sortId": switchKeywords($("#searchText").val()),
                    "type": "titleasc"
                }, arr);
            }

            sessionStorage.setItem("currentPage", ONE);
        });
        $("#filterBtn").on("click", function () {
            var textValue = $("#searchText").val();
            var min = $("#priceFirst").val();
            var max = $("#priceLast").val();
            var min = min == "" ? 0 : min;
            var max = max == "" ? 0 : max;
            var minPrice = min > max ? max : min;
            var maxPrice = min > max ? min : max;
            ajaxGet("http://localhost:8080/search/pricerange", {
                "currentPage": 1,
                "maxSize": 12,
                "minPrice": minPrice,
                "maxPrice": maxPrice
            }, arr);
            sessionStorage.setItem("currentPage", ONE);
        });

        $("#nextPage").on("click", function () {
            var page = parseInt(sessionStorage.getItem("currentPage"));
            var currentpage = page + 1;
            sessionStorage.setItem("currentPage", currentpage);
            var newURLRequest = urlGet(currentpage);
            nextAJAX(newURLRequest, null, arr);
            $("#pageNumber>ul>li").eq(page).addClass("pageColor").siblings("li").removeClass("pageColor");
            $("#pageNumber>ul>li").eq(page).addClass("prevent").siblings("li").removeClass("prevent");
            $("#prePage").removeClass("prevent").css("color", "black");
            if (currentpage < totallyPages - 1) {
                $("#nextPage").removeClass("prevent").css("color", "black");
            } else {
                $("#nextPage").addClass("prevent").css("color", "gray");
            }
        });
        $("#prePage").on("click", function () {
            var page = parseInt(sessionStorage.getItem("currentPage"));
            var currentpage = page - 1;
            sessionStorage.setItem("currentPage", currentpage);
            var newURLRequest = urlGet(currentpage);
            nextAJAX(newURLRequest, null, arr);
            var b = currentpage - 1;
            console.log(b);
            $("#pageNumber>ul>li").eq(b).addClass("pageColor").siblings("li").removeClass("pageColor");
            $("#pageNumber>ul>li").eq(b).addClass("prevent").siblings("li").removeClass("prevent");
            $("#nextPage").removeClass("prevent").css("color", "black");
            if (currentpage == 1) {
                $("#prePage").addClass("prevent").css("color", "gray");
            }
            else {
                $("#prePage").removeClass("prevent").css("color", "black");
            }
        });
    });
</script>
</body>
</html>